<template>
  <div class="home-index" >
      <view class="home-swiper" v-if="imgUrls.length!=0">
        <swiper :indicator-dots="false"
          :autoplay="false" :interval="interval" :duration="duration">
          <block v-for="(item,index) in imgUrls"  :key="index">
            <swiper-item>
              <image :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item" class="slide-image"  />
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class="group-list">
        <div class="md-msg text-center">
          <div class="md-msg-item" @click="selectItme(1,'长寿之声')">
            <div class="item-img"> 
              <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/longevity.png"  ></image>
            </div>
            <div class="name">长寿之声</div>
            <div class="describe">用声音传播长寿之道</div>
          </div>
          <div class="md-msg-item" @click="selectItme(2,'感寿之相')">
            <div class="item-img">
              <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/Feelings.png"  ></image>
            </div>
            <div class="name">感寿之相</div>
            <div class="describe">影像诠释健康方法</div>
          </div>
          <div class="md-msg-item" @click="selectItme(3,'长寿家族')">
            <div class="item-img">
              <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/family.png"  ></image>
            </div>
            <div class="name">长寿家族</div>
            <div class="describe">长寿互助 健康论坛</div>
          </div>
        </div>
      </view> 
      <!--快速导航-->
      <view class="group-list">
        <div class="list-title">
          <group-title title="快速导航"></group-title>
        </div>  
        
        <div class=" quick-nav text-center">  
          <div class="quick-nav-group item-brt"  @click="clickNavItem(1)">
            <div class="quick-icon-item"> 
                <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/q-nav01.png"   ></image>
                <div class="describe">
                  <p class="title">长寿经穴</p>
                  <p class="text-info">温筋通络 穴位养生</p>
                </div>
            </div> 
          </div>  
          <div class="quick-nav-group " @click="clickNavItem(2)">
            <div class="quick-icon-item">
                <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/q-nav02.png"   ></image>
                <div class="describe">
                  <p class="title">长寿功法</p>
                  <p class="text-info">功法引导 吐息忽纳</p>
                </div>
            </div> 
          </div> 
        </div> 

        <div class=" quick-nav text-center">  
          <div class="quick-nav-group item-brt" @click="clickNavItem(3)">
            <div class="quick-icon-item">
                <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/q-nav03.png"  ></image>
                <div class="describe">
                  <p class="title">长寿白方</p>
                  <p class="text-info">诸集调养 辩证统治</p>
                </div>
            </div> 
          </div>  
          <div class="quick-nav-group " @click="clickNavItem(4)">
            <div class="quick-icon-item">
                <image  class="img"  mode="aspectFit"  src="https://rqys.hleason.com/dist/images/q-nav04.png"  ></image>
                <div class="describe">
                  <p class="title">快速问诊</p>
                  <p class="text-info">健康问题 专业指导</p>
                </div>
            </div> 
          </div> 
        </div>  
      </view> 

      <!--相关推荐-->
      <div class="group-list" v-show="statePrdList.length!=0">
        <div class="list-title">
          <group-title title="相关推荐"></group-title>
        </div>   
        <div class="prd-group clear-both">
          <prd-card v-for="(item,index) in statePrdList" :title="item.title" :text="item.content_simple" :imgUrl="item.thumb" :item="item" :key="index" v-if="index<4" @jump="jumpDetail"></prd-card> 
        </div>
      </div> 
    <zan-loadmore type="text"></zan-loadmore>
  </div>
</template>

<script> 
import groupTitle from '@/components/tpl/group-title' 
import prdCard from '@/components/tpl/prd-card' 
import * as api  from '@/utils/api' 
export default {
  onLoad(){
    this.getSwiperList(); 
    this.getPrdList();  
  },
  data () {
    return { 
      imgUrls: [],  
      interval: 5000,
      duration: 600,
      statePrdList:[],
    }
  },

  components: {
    groupTitle,
    prdCard
  },

  methods: { 
    //获取轮播
    getSwiperList(){
      let vm = this; 
      let body={
        model: "Banners" 
      };
      api.getInfoById(body).then(res=>{ 
        if(res.data.code==200){ 
          let arr=res.data.data.banners.split(',');  
          vm.imgUrls=arr;
        }
      });
    },
    selectItme (val,a) {  
      if(val==3){
        let url = `./../long-family/main`;
        wx.navigateTo({url}) 
      }else{
        let url = `./../common/main?typeId=${val}&title=${a}`;
        wx.navigateTo({url}) 
      } 
    },

    //快速导航跳转
    clickNavItem(val){
      if(val==1){
        let url = './../acupoint/main';
        wx.navigateTo({url}) 
      }else if(val==2){
        let url = './../gongfa/main';
        wx.navigateTo({url})  
      }else if(val==3){
        let url = './../long-method/main';
        wx.navigateTo({url})  
      }else if(val==4){
        let url = './../jump-app/main';
        wx.navigateTo({url})  
      }
      
    },
    getPrdList(){ 
      let vm = this;
      vm.tabList=[];
      let body={
        model: "Articles",
        condition:{
          is_rec: 1, 
        }
      };
      api.commonSite(body).then(res=>{ 
        if(res.data.code==200){ 
          vm.statePrdList=res.data.data.data;
        }
      });
    },
    jumpDetail(item){
      let url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
      wx.navigateTo({url}) 
    },

  },

  created () {
     
  }
}
</script>

<style  lang="scss" scoped>
.home-index {
  width:100%;
  min-height:100%; 
  .home-swiper{
    width:100%;
    .slide-image{
      width:100%;
      height:100%;
    }
  }
  .group-list{
    width:100%;
    margin-bottom:20rpx;
    padding-bottom:20rpx;
    padding-top:10rpx;
    background:#fff;
    box-sizing:border-box;
    .md-msg{
      display:flex;
      .list-title{
        width:100%;
      }
      .md-msg-item{
        flex:1;
        .item-img{
          width:100%;
          min-height:100rpx;
          .img{
            height:110rpx;
            width:110rpx;
          } 
        }
        .name{
         font-weight:400;
          font-size:28rpx;
          color:#4F4F4F;
          margin-bottom:15rpx;
        }
        .describe{ 
          font-size:22rpx;
          color:#A6A6A6;
        }
      } 
    }
    /**快速导航 */
    .quick-nav{
      width:100%; 
      display: flex; 
      border-top:1rpx solid #F4F4F4;
      border-bottom:1rpx solid #F4F4F4; 
      .item-brt{
        border-right:1rpx solid #F4F4F4;
      }
      .quick-nav-group{
        flex:1; 
        padding:15rpx 0;
        .quick-icon-item{ 
          width:100%;
          display: flex;
          justify-content:center;
          align-items:Center; 
          .img{
            width:100rpx;
            height:100rpx;
            border:0;  
          }
          .describe{ 
            display:inline-block; 
            margin-left:16rpx;
            .title{
              font-size:30rpx;
              color:#E65D5D; 
            }
            .text-info{
              font-size:24rpx;
              color:#CBCAC9;
            }
          }
        }
        
      }
      &:last-child{
        border-top:0;
      }
    }
    /**相关推荐***/
    .prd-group{
      width:100%; 
      padding: 0 20rpx;
      box-sizing:border-box;
    }
    
  }
}

 
</style>
